<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
   
</head>
<body>  
    <!-- 组件 -->
    <div id="app">
        <child-com></child-com>
    </div>
    <script>
        Vue.component("childCom",{
            template:` 
                <div style="background : red">
                <h1>{{ childMsg }}</h1>
                <grandchild-com :getMsg="childMsg"></grandchild-com>
                </div>    
            `,
            data(){
                return {
                    childMsg:"hello"
                }
            },
            components: {
                "grandchildCom":{
                    template:`
                        <h2>{{ getMsg }}---{{ grandchildMsg }}</h2>                                        
                    `,
                    data(){
                        return{
                            grandchildMsg:"world",
                        }
                    },
                    props:{
                        getMsg:{
                            type:String,
                            default:""
                        }
                    }

                }
            }
        })
        //childCom是全局组件 在实例化组件时要用中划线 “child-com”
        
        var app = new Vue({
            el: "#app",
            
        });
        // app相当于一个父组件 html文件相当于一个根组件
    </script>
</body>
</html>